<template >
  <div class="acc-transfer-container" ref="template">
    <div class="header">
      <div class="img-back">
        <span class="img"></span>
      </div>
      <div class="span">
        <span>账户转账c</span>
      </div>
    </div>
    <div class="transfer-list">
      <li-acc-click mType="收款账户" :account="payee" ></li-acc-click>
      <li-show mType="币种" :allBalance="currency" ></li-show>
      <li-acc-input :callbackInput="callbackInput"></li-acc-input>
      <li-acc-click mType="付款账户" :account="payAcc"></li-acc-click>
      <li-show :allBalance="allBalance"></li-show>
    </div>
    <div class="outside-click" v-clickoutside="clickoutsideMehthod">点击 有 触动</div>
    <el-button type="danger" round size="medium" class="btn_next" @click="sayHello($event)">下一步</el-button>
  </div>
</template>

<script>
// import Clickoutside from '@/views/clickoutside';
const MixinsSlot = {
  data(){
    return {
      allBalance: "99.98",
      currency: "欧元",
    }
  },
  mounted() {
    console.log('通过mixins 生命周期 调用方法 mounted ')
    this.currency = this.currency + '-duble-'
  },
  methods:{
    sayHello(){
      console.log('点击下一步按钮 通过mixins 在不改变原代码结构情况下 加入代码方法 sayHello')
    }
  }, 
  // directive:{Clickoutside}
}
export default {
  // mixins:[MixinsSlot],
  data() {
    return {
      allBalance: "9.98",
      payAcc: "62284806221890098",
      currency: "人民币",
      mType: "币种",
      payee: "请选择"
    };
  },
  mounted() {
    this.currency = this.currency + '-again'
  },
  methods: {
    handleChange(value) {},
    callbackInput(trans_acc = '0.0'){
      console.log('实时打印回调-子组件动态输入的内容>>>', trans_acc)
    },
    sayHello(event){
      console.log('点击下一步按钮 原码逻辑中 调用方法 sayHello',event, event.tag, event.data)
    },
    clickoutsideMehthod(){
      console.log('点击clickoutside按钮  调用方法 clickoutsideMehthod')
    }
    
  },
  // directives:{Clickoutside}
};
</script>

<style lang='scss'>
.outside-click{
  height: 50px;
  width: 100%;
  line-height: 50px;
  text-align: center;
  border:#ee827f 1px solid;
  background-color: #e3e3e4;
  color: #ee827f;
}
body {
  margin: 0 0;
  padding: 0 0;
  background-color: #f3f3f3;
}
.acc-transfer-container {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 0;
  padding: 0 0;
  .btn_next {
    width: 80%;
    margin: 30px 0;
  }
}
.header {
  position: relative;
  padding: 5px auto 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-bottom: #e3e3e4 solid 1px;
  background: white;
  height: 44px;

  span {
    font-size: 18px;
    text-align: center;
    align-self: center;
    width: auto;
    color: #647381;
    font-weight: 700;
  }
  .img-back {
    position: absolute;
    display: block;
    left: 0;
    bottom: 2px;
    background-color: transparent;
  }

  .img {
    display: block;
    background: url("../public/images/backicon_jhy.png") no-repeat;
    width: 20px;
    height: 20px;
    margin: 5px 4px;
    background-size: 26px 20px;
  }
}
.el-button span {
  font-size: 14px;
  border-radius: 3px;
}
.el-button--danger {
  color: #fff;
  background-color: #ee827f;
  border-color: #ee827f;
  span {
    letter-spacing: 0.2em;
    margin-left: 4px;
  }
}
</style>